<template>
    <div>
        <img src="../../assets/newsImg/newsbanner.jpg" class="titleImg">
        <div class="newsTitle">
            <h3>最新资讯</h3>
            <p>THE LATEST INFORMATION</p>
        </div>
        <div class="newsMain">
            <div class="product">
                <div v-for="(v,i) of newsList" :key="i+100" class="productIn" @click="goDtail(v.id)">
                    <div style="width: 575px;height: 367px;overflow: hidden">
                        <img :src="`http://www.shangyuninfo.com/api/profile/product/${v.route}`"
                             alt="" class="animate">
                    </div>
                    <p class="subTitle">{{v.category}}</p>
                    <p class="title">{{v.name}}</p>
                    <p class="textForPruduct">{{v.author}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getNewsList} from "../../api";

    export default {
        name: "newsIn",
        data(){
            return {
                newsList:[]
            }
        },
        created() {
            this.$store.commit('changePage', 4)
            getNewsList ().then(res =>{
                console.log(res)
                this.newsList=res.data.rows
            })
        },
        methods:{
            goDtail(to) {
                this.$router.push({
                    path:'/detailsForNews',
                    query:{
                        id:to,
                        select:'公司新闻'
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .titleImg {
        width: 100%;
    }
    /*标题*/
    .newsTitle {
        width: 1200px;
        margin: auto;
        padding: 65px 0px;
        h3 {
            font-family: BaseTitle-webfont;
            font-size: 30px;
            font-weight: 100;
            text-align: center;
            color: #1d1d1d;
        }

        p {
            font-family: '方正兰亭超细黑';
            font-size: 18px;
            font-weight: 100;
            letter-spacing: 1px;
            text-align: center;
            color:rgb(125, 125, 125);
        }
    }
    //主体product
    .newsMain {
        width: 1230px;
        margin:auto ;
    }
    .product {
        overflow: hidden;
    }

    .productIn {
        cursor: pointer;
        width: 575px;
        padding: 0px 20px;
        float: left;
        margin: 30px auto;
        height: 550px;
        img {
            width: 100%;
            height: 367px;
        }
        .subTitle {
            display: block;
            margin: 10px 0;
            color: #666;
            font-size: 14px;
        }
        .title {
            margin-top: 10px;
            font-weight: 700;
            font-family: "Adobe 黑体 Std R"
        }
        .title:hover {
            text-decoration: underline;
        }
        .textForPruduct {
            margin-top: 20px;
            font-size: 16px;
            letter-spacing: 1px;
            line-height: 28px;
            text-align: left;
            color: #888889;
            height: 84px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
        }
    }
    .animate {
        transition: transform 1s ease;
    }
    .animate:hover {
        transform: scale(1.1,1.1);
    }
</style>